<template>
    <van-nav-bar title="关联库存单" left-arrow @click-left="handleLeft">
        <template #right>
            <van-image :src="duoxuan" class="duoxuan" @click="multipleChoice" v-if="types == 'add'" />
        </template>
    </van-nav-bar>
    <div class="associatedInventory"
        :style="{ height: multipleChoices ? 'calc(100vh - 37.3vw)' : 'calc(100vh - 24vw)' }">
        <div class="product_list_serch-text">
            <van-search class="product_list_serch1" v-model="queryParams.content" shape="round" background="#F6FAFF"
                placeholder="请输入商品名称/商品编号/库存编码" />
            <van-button class="product_list-btn" round @click="onSearch">搜索</van-button>
        </div>
        <div class="screen">
            <div class="screen_div" @click="screenClick()">
                <div class="screen_child">{{ queryParams.categoryIdList.length ? '多品类' : '商品类目' }}</div>
                <van-image :src="heisexiasanjiao" class="screen_icons" />
            </div>
            <div class="screen_div" v-if="indexs == '1'" @click="anchorShow = true">
                <div class="screen_child">选品主播</div>
                <van-image :src="heisexiasanjiao" class="screen_icons" />
            </div>
            <div class="screen_div" v-if="indexs == '1'" @click="dateShow = true">
                <div class="screen_child">邀约时间</div>
                <van-image :src="heisexiasanjiao" class="screen_icons" />
            </div>
            <div class="screen_div" v-if="indexs == '2'" @click="anchorShows = true">
                <div class="screen_child">{{ anchorName }}</div>
                <van-image :src="heisexiasanjiao" class="screen_icons" />
            </div>
            <div class="screen_div" v-if="indexs == '2'" @click="dateShows = true">
                <div class="screen_child">{{ dateName }}</div>
                <van-image :src="heisexiasanjiao" class="screen_icons" />
            </div>
            <van-action-sheet title="商品类目" v-model:show="investmentShow" :actions="investmentList"
                @select="onSelectInvestment" />
            <van-action-sheet title="选品主播" v-model:show="anchorShow" :actions="anchorList" @select="onSelectAnchor" />
            <van-action-sheet title="邀约时间" v-model:show="dateShow" :actions="dateyList" @select="onSelectDate" />
            <van-action-sheet title="出库主播" v-model:show="anchorShows" :actions="anchorList" @select="onSelectAnchors" />
            <van-action-sheet title="出库时间" v-model:show="dateShows" :actions="dateyList" @select="onSelectDates" />
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无可关联的库存单</div>
                    </div>
                </template>
                <div class="product_list_van_list">
                    <!-- <div class="conent_pre" v-for="(item, index) in list" :key="index">
                        <div class="product_detail_title--content">
                            <div class="product_detail_title-content-info">
                                <div class="style_name">
                                    <div class="title">{{ item.productName }}</div>
                                    <van-image :src="copy" class="imgs" @click="copyClick(item.productName)" />
                                </div>
                                <div :class="'contnt_status' + item.shelvesStatus">
                                    {{ shelvesStatusNameByIdss(item.shelvesStatus) }}
                                </div>
                            </div>
                            <div class="product_detail_title-content-info">
                                <div class="product_detail_title-content-info-name">库存编码：</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.stockCode }}
                                </div>
                            </div>
                            <div class="product_detail_title-content-info" v-if="indexs == '2'">
                                <div class="product_detail_title-content-info-name">选品部门：</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.coreName }}
                                </div>
                            </div>
                            <div class="product_detail_title-content-info" v-if="indexs == '2'">
                                <div class="product_detail_title-content-info-name">出库时间：</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.stockOutTime }}
                                </div>
                            </div>
                            <div class="product_detail_title-content-info" v-if="indexs == '2'">
                                <div class="product_detail_title-content-info-name">操作人：</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.operatorName }}
                                </div>
                            </div>
                            <div class="product_detail_title-content-info">
                                <div class="product_detail_title-content-info-name">未还总数：</div>
                                <div class="product_detail_title-content-info-content colors">
                                    {{ item.quantity }}
                                </div>
                            </div>

                        </div>
                        <div class="buttons_div">
                            <van-checkbox v-show="multipleChoices" v-model="item.checked" v-if="multipleChoices"
                                shape="square" @change="onCheckboxChange(item, $event)"
                                :disabled="computedStyle(item)" />
                            <van-button type="primary" class="buttons_items" @click="associationClick(item)" v-else
                                :disabled="computedStyle(item)">关联</van-button>
                        </div>
                    </div> -->
                    <div class="conent_list" v-for="(item, index) in list" :key="index">
                        <div class="list_top">
                            <van-image radius="5" width="90" height="90"
                                :src="item?.productImages ? item?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
                            <div class="list_top_right">
                                <div class="list_top_title">
                                    <div class="title_name">{{ item.productName }}</div>
                                    <div class="title_tag" :class="'title_tag' + item.shelvesStatus">{{
                                        shelvesStatusNameByIdss(item.shelvesStatus) }}</div>
                                </div>
                                <div class="list_top_sellingPoints">{{ item?.sellingPoints }}</div>
                                <div class="list_top_right_money">
                                    <div class="money_left">
                                        <div v-if="item?.mechanism.cooperationMode === '分佣'">
                                            ￥<span>{{ item?.mechanism.price }}</span>
                                        </div>
                                        <div v-if="item?.mechanism.cooperationMode === '供货'">
                                            ￥<span>{{ item?.mechanism.costPrice }}</span>
                                        </div>
                                        <div v-if="item?.mechanism.cooperationMode === '分佣'" class="commission">
                                            <span class="fonts">佣</span>
                                            <span class="numbers">
                                                {{ item?.mechanism.commission }}%
                                            </span>
                                        </div>
                                    </div>
                                    <div class="money_right" v-if="item?.mechanism.liveStreamingMechanism">
                                        {{ item?.mechanism.liveStreamingMechanism }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="list_down">
                            <div class="list_down_item">
                                <span class="list_down_label">库存编码：</span>
                                <span class="list_down_value">{{ item.stockCode }}</span>
                            </div>
                            <div class="list_down_item list_down_items">
                                <span class="list_down_label">未还总数：</span>
                                <span class="list_down_value list_down_value_lan">{{ item.quantity }}</span>
                            </div>
                        </div>
                        <div class="list_down">
                            <div class="list_down_item">
                                <span class="list_down_label">操作人：</span>
                                <span class="list_down_value">{{ item.operatorName }}</span>
                            </div>
                            <div class="list_down_item list_down_items">
                                <span class="list_down_value">{{ item.stockOutTime }}</span>
                            </div>
                        </div>
                        <div class="buttons_div">
                            <div class="buttons_div_coreName">
                                <van-image :src="icon_bumen"></van-image>
                                <div class="coreName">{{ item.coreName }}</div>
                            </div>
                            <van-checkbox v-show="multipleChoices" v-model="item.checked" v-if="multipleChoices"
                                shape="square" @change="onCheckboxChange(item, $event)"
                                :disabled="computedStyle(item)" />
                            <van-button type="primary" class="buttons_items" @click="associationClick(item)" v-else
                                :disabled="computedStyle(item)">关联</van-button>
                        </div>
                        <!-- <div class="product_detail_title--content">
                            <div class="product_detail_title-content-info">
                                <div class="style_name">
                                    <div class="title">{{ item.productName }}</div>
                                    <van-image :src="copy" class="imgs" @click="copyClick(item.productName)" />
                                </div>
                                <div :class="'contnt_status' + item.shelvesStatus">
                                    {{ shelvesStatusNameByIdss(item.shelvesStatus) }}
                                </div>
                            </div>
                           
                            <div class="product_detail_title-content-info" v-if="indexs == '2'">
                                <div class="product_detail_title-content-info-name">选品部门：</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.coreName }}
                                </div>
                            </div>
                           
                           
                           

                        </div> -->
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>

        <div class="button" v-if="multipleChoices">
            <div class="cancel" @click="cancels">取消已选</div>
            <div class="outbound" @click="outbound" v-throttle:click>全部入库 ({{ selectedItem.length }})</div>
        </div>
        <van-dialog v-model:show="dialogShow" :showConfirmButton="false">
            <div class="dialog_top">
                <van-image :src="icon_erciqueren"></van-image>
                <div class="title">提示</div>
            </div>
            <div class="content">{{ `请确认是否关联${multipleChoices ? '以上' : '当前'}库存单?` }}</div>
            <div class="dialog_buttons">
                <div @click="cancel" class="cancel">取消</div>
                <div @click="save" class="save">确认</div>
            </div>
        </van-dialog>
    </div>
    <category :isShow="isShow" @leftClick="leftClick" @onSubmit="onSubmit" :multiple="true"
        v-model:value="queryParams.categoryIdList" />
</template>
<script setup lang="ts">
import { shelvesStatusNameByIdss } from '@/utils/statusNameById'
import category from '@/components/category/index.vue'
import { stockOutQueryProduct } from "@/api/productHome/index";
import { getSystemList } from '@/api/approval/index'
import { queryOperationDeptList } from "@/api/productList/index";
import { computed, ref } from 'vue';
import { getEnvValue } from "@/utils/index";
import { useRoute, useRouter } from 'vue-router';
import { showConfirmDialog, showFailToast } from 'vant';
const icon_erciqueren = new URL("@/assets/operation/icon_erciqueren.png", import.meta.url).href;
const heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
const duoxuan = new URL("@/assets/productHome/icon_duoxuan.png", import.meta.url).href;
const icon_bumen = new URL("@/assets/productHome/icon_bumen.png", import.meta.url).href;
const route = useRoute();
const router = useRouter()
// 入口 补样入库 == 1 还品入库 == 2
const indexs = computed(() => {
    return route.query.index;
});
// 新增商品或者修改商品的库存单
const types = computed(() => {
    return route.query.type;
});
// 有库存单时 更改库存单的库存单id
const ssociatedInventoryId = computed(() => {
    return route.query.ssociatedInventoryId;
});

// 产品id
const productId = computed(() => {
    return route.query.productId;
});

/** 回退 */
const handleLeft = () => {
    showConfirmDialog({
        message:
            '退出后将不保留未完成操作',
    })
        .then(() => {
            router.push({
                path: '/addArehousing',
                query: {
                    types: 'left',
                    index: indexs.value,
                    info: JSON.stringify(selectedItem.value),
                }
            })
        })
        .catch(() => {
            // on cancel
        });


}
//商品类目
const investmentShow = ref(false)
const investmentList = ref([])
//选品主播
const anchorShow = ref(false)
const anchorList = ref([])
// 邀约时间
const dateShow = ref(false)
const dateyList = ref([
    {
        name: "全部",
        status: null,
        color: '#0094FF'
    },
    {
        name: "近三天",
        status: 3,
        color: '#323233'
    },
    {
        name: "近七天",
        status: 15,
        color: '#323233'
    },
    {
        name: "近十天",
        status: 30,
        color: '#323233'
    },
])
const dialogShow = ref(false)
//出库主播
const anchorShows = ref(false)
// 出库时间
const dateShows = ref(false)

// 限制连续刷新数据重复问题
const refreFlag = ref(true)
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    // 商品类目
    recruiterDeptId: '',
    // 主播
    coreId: '',
    // 时间
    outDays: '',
    // 搜索值
    content: '',
    categoryIdList: []
});

// 选中数据
const selectedItem = ref<any>([])

const anchorName = ref('出库主播')
const dateName = ref('出库时间')

const multipleChoices = ref(false)
// 多选
const multipleChoice = () => {
    multipleChoices.value = !multipleChoices.value
    if (!multipleChoices.value) {
        list.value.forEach(item => {
            item.checked = false
        })
        selectedItem.value = []
    }
}

/** 选中事件 */
const onCheckboxChange = (item, checked) => {
    if (!checked) {
        const index = selectedItem.value.findIndex(
            (selected) => selected.id === item.id
        );
        if (index !== -1) {
            selectedItem.value.splice(index, 1);
        }
    } else {
        selectedItem.value.push(item);
    }
};
/** 多选取消 */
const cancels = () => {
    list.value.forEach(item => {
        item.checked = false
    })
    selectedItem.value = [];
};
/** 入库 */
const outbound = async () => {
    if (selectedItem.value.length == 0) {
        showFailToast('请勾选入库商品');
    } else {
        dialogShow.value = true
    }
};
/** 搜索 */
const onSearch = () => {
    onRefresh()
}

/** 商品类目 */
const screenClick = () => {
    isShow.value = true
}

const isShow = ref<any>(false)
// 类目导航返回
const leftClick = () => {
    isShow.value = false
}
// 搜索查询
const onSubmit = () => {
    isShow.value = false
    onRefresh()
}


/** 获取商品类目列表 */
const getsList = async () => {
    const res = await getSystemList({ parentId: '1796913597400784898' })
    if (res.data.length) {
        res.data.unshift({
            deptName: '全部',
            deptId: null
        })
        res.data.forEach(item => {
            item.name = item.deptName
            item.status = item.deptId
        })
        investmentList.value = res.data
    }
}
getsList()
/** 获取主播列表 */
const getanchor = async () => {
    const res = await queryOperationDeptList();
    if (res.data.length) {
        res.data.forEach(item => {
            item.name = item.deptName
            item.status = item.deptId
            item.color = '#323233'
        })
        res.data.unshift({
            deptName: '全部',
            deptId: null,
            name: '全部',
            status: null,
            color: '#0094FF'
        })
        anchorList.value = res.data
    }
}
getanchor()
/** 选品主播列表点击 */
const onSelectAnchor = (selection) => {
    investmentShow.value = false;
    queryParams.value.coreId = selection.deptId
    onRefresh()
}
/** 出库主播列表点击 */
const onSelectAnchors = (selection) => {
    anchorShows.value = false;
    queryParams.value.coreId = selection.deptId
    anchorList.value.forEach((item: any) => { item.color = '#323233' })
    selection.color = '#0094FF'
    anchorName.value = selection.name == '全部' ? '出库主播' : selection.name
    onRefresh()
}
/** 商品类目点击 */
const onSelectInvestment = (selection) => {
    investmentShow.value = false;
    queryParams.value.recruiterDeptId = selection.deptId
    onRefresh()
}
/** 邀约时间事件 */
const onSelectDate = (selection) => {
    dateShow.value = false;
    queryParams.value.outDays = selection.status
    onRefresh()
}
/** 出库时间事件 */
const onSelectDates = (selection) => {
    dateShows.value = false;
    queryParams.value.outDays = selection.status
    dateyList.value.forEach((item: any) => { item.color = '#323233' })
    selection.color = '#0094FF'
    dateName.value = selection.name == '全部' ? '出库时间' : selection.name
    onRefresh()
}

/** 二次确认取消 */
const cancel = () => {
    dialogShow.value = false
    selectedItem.value = []
}
/** 二次确认确定 */
const save = () => {
    // 没有库存单时候 
    if (types.value !== 'editOriginal') {
        // 存库存单id集合
        if (JSON.parse(localStorage.getItem('relatedDocumentsId') as any)) {
            const arrList = JSON.parse(localStorage.getItem('relatedDocumentsId') as any)
            const ids = selectedItem.value.map((item: any) => item.detailId)
            arrList.push(...ids)
            localStorage.setItem('relatedDocumentsId', JSON.stringify(arrList))
        } else {
            const ids = selectedItem.value.map((item: any) => item.detailId)
            localStorage.setItem('relatedDocumentsId', JSON.stringify(ids))
        }
    } else {
        // 有库存单时候 更改现有库存单
        const arrList = JSON.parse(localStorage.getItem('relatedDocumentsId') as any)
        const index = arrList.indexOf(ssociatedInventoryId.value)
        arrList.splice(index, 1)
        const ids = selectedItem.value.map((item: any) => item.detailId)
        arrList.push(...ids)
        localStorage.setItem('relatedDocumentsId', JSON.stringify(arrList))
    }
    router.push({
        path: '/addArehousing',
        query: {
            info: JSON.stringify(selectedItem.value),
            types: types.value,
            // 入库类型
            index: indexs.value,
        }
    })

}
/** 关联 */
const associationClick = (item: any) => {
    dialogShow.value = true
    selectedItem.value = [item]
}
/** 关联按钮的样式 分选中过和没选中过 */
const computedStyle = (item: any) => {
    const relatedDocumentsId = JSON.parse(localStorage.getItem('relatedDocumentsId') as any)
    if (relatedDocumentsId && relatedDocumentsId.length > 0) {
        if (relatedDocumentsId.indexOf(item.detailId) !== -1) {
            return true
        } else {
            return false
        }
    } else {
        return false
    }
}

/** 查询商品列表 */
const getList = async () => {
    try {
        const res = await stockOutQueryProduct({ ...queryParams.value, productId: productId.value });
        if (res.code == 200) {
            refreFlag.value = true
            // 空数据 停止加载
            if (res.data.rows.length == 0) {
                list.value = [];
                finished.value = true;
                return;
            }
            // 有数据 赋值列表 加载状态结束
            res.data.rows.forEach((item) => {
                finished.value = false;
                list.value.push(item);
            });
            res.data.rows.forEach(async (item) => {
                if (item.productImage) {
                    item.productImages = getEnvValue("VITE_APP_PIC_URL") + item.productImage.split(',')[0];
                } else {
                    item.productImages = "";
                }
            });
            loading.value = false;
            refreshing.value = false;
            // 如果list长度大于等于总数据条数，数据全部加载完成
            if (list.value.length >= res.data.total) {
                finished.value = true; //结束加载
            }
        } else {
            refreFlag.value = true
            list.value = [];
            finished.value = true;
            loading.value = false;
            refreshing.value = false;
            return;
        }
    } catch (error) {
        refreFlag.value = true
        list.value = [];
        finished.value = true;
        loading.value = false;
        refreshing.value = false;
        return;
    }
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
</script>
<style lang="less" scoped>
:deep(.van-icon-arrow-left) {
    color: #000 !important;
}

.duoxuan {
    width: 18px;
    height: 18px;
}

.associatedInventory {
    width: 100%;
    // height: calc(100vh - 90px);
    background-color: #F6FAFF;

    .nothing_div {
        width: 100%;
        margin: auto;
        text-align: center;
        margin-top: 20vh;
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        line-height: 12px;
        flex-wrap: wrap;

        .van-image {
            width: 160px;
            height: 160px;
        }

    }

    .product_list_serch-text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 34px;
        margin-bottom: 10px;
        padding-top: 10px;
        position: relative;

        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 10px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 100%;
            height: 34px;
            position: relative;

            :deep(.van-search__content) {
                height: 35px;
                padding-left: 0 !important;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list-btn {
            width: 54px;
            height: 26px;
            font-size: 14px;
            color: #ffffff;
            border: none;
            background: #0094ff;
            white-space: nowrap;
            position: absolute;
            top: 14px;
            right: 5%;
        }
    }

    .screen {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        height: 44px;
        width: 100%;
        padding: 27px;
        line-height: 44px;
        background-color: #fff;

        .screen_div {
            display: flex;
            align-items: center;

            .screen_child {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                max-width: 60px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .screen_icons {
                width: 10px;
                height: 6px;
                margin-left: 5px;
            }

        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100% - 108px);
        overflow: scroll;
    }

    .conent_pre {
        width: 100%;
        padding: 5px 15px 15px;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 10px;

        .conent_pre_header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .conent_pre_img {
                width: 90px;
                height: 90px;

                .van-image {
                    width: 90px;
                    height: 90px;

                    :deep(.van-image__img) {
                        border-radius: 5px !important;
                    }
                }
            }

            .conent_pre_des {
                width: calc(100% - 90px);
                // height: 90px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                padding-left: 10px;
                align-content: space-around;

                .contnt_title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .contnt_styleName {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1A1B1C;
                        width: 150px;
                        height: 20px;
                        white-space: nowrap;
                        /* 确保文本在一行内显示 */
                        overflow: hidden;
                        /* 隐藏溢出的内容 */
                        text-overflow: ellipsis;
                    }

                    .contnt_status {
                        width: 67px;
                        height: 26px;
                        background: #E7FDEE;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #19D11B;
                        text-align: center;
                        line-height: 26px;
                    }

                }

                .contnt_mechanism {
                    width: 100%;
                    font-weight: 400;
                    font-size: 12px;
                    color: #B8BECA;
                    white-space: nowrap;
                    /* 确保文本在一行内显示 */
                    overflow: hidden;
                    /* 隐藏溢出的内容 */
                    text-overflow: ellipsis;
                }

                .contnt_bottom {
                    width: 100%;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .price {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .commission {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .coreName {
                        font-weight: 400;
                        font-size: 12px;
                        color: #0094FF;
                    }
                }
            }
        }

        .product_detail_title-content-info {
            margin-top: 20px;
            display: flex;
            align-items: center;
            width: 100%;

            .product_detail_title-content-info-name {
                font-weight: 400;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
                width: 90px;
            }

            .style_name {
                font-weight: 400;
                font-size: 16px;
                color: #1A1B1C;
                display: flex;
                align-items: center;
                width: calc(100% - 70px);

                .title {
                    max-width: 250px;
                }

                .imgs {
                    width: 14px;
                    height: 14px;
                    margin-left: 10px;
                }
            }

            .colors {
                color: #0094FF !important;
            }

            .status {
                width: 70px !important;
                margin-left: auto;
                font-weight: 400;
                font-size: 14px;
                text-align: center;
                height: 26px;
                line-height: 26px;
                background: #E7FDEE;
                border-radius: 2px;
                color: #19D11B;
            }



            .product_detail_title-content-info-content {
                font-weight: 400;
                font-size: 14px;
                color: #b8beca;
                line-height: 14px;
                margin-left: auto;
                width: calc(100% - 75px);
                display: flex;
                justify-content: flex-end;
                word-break: break-all;
            }
        }

        .buttons_div {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;

            .buttons_items {
                width: 84px;
                height: 24px;
                background: #0094FF;
                border-radius: 2px;
                text-align: center;
                line-height: 24px;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
            }

        }
    }

    .conent_list {
        width: 100%;
        padding: 5px 15px 15px;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 10px;

        .list_top {
            padding: 10px 0 0;
            display: flex;

            .list_top_right {
                flex: 1;
                min-width: 0;
                margin-left: 10px;

                .list_top_title {
                    width: 100%;
                    display: flex;
                    align-items: center;

                    .title_name {
                        flex: 1;
                        min-width: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 400;
                        font-size: 16px;
                        color: #1A1B1C;
                    }

                    .title_tag {
                        padding: 0 5px;
                        height: 26px;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 26px;
                        text-align: center;
                    }

                    .title_tag1 {
                        background: #EBF4FF;
                        color: #0094FF;
                    }

                    .title_tag2 {
                        background: #E7FDEE;
                        color: #19D11B;
                    }

                    .title_tag3 {
                        background: #FDE7E7;
                        color: #FC2540;
                    }

                    .title_tag4 {
                        background: #EBF4FF;
                        color: #0094FF;
                    }
                }

                .list_top_sellingPoints {
                    width: 100%;
                    font-weight: 400;
                    font-size: 12px;
                    color: #8492AD;
                    line-height: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    word-break: break-all;
                    margin-top: 10px;
                }

                .list_top_right_money {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    .money_left {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                        display: flex;
                        align-items: center;

                        &>div:first-child {
                            margin-right: 10px;

                            span {
                                font-size: 18px;
                            }
                        }

                        .commission {
                            margin-right: 10px;

                            .fonts {
                                display: inline-block;
                                width: 22px;
                                // height: 16px;
                                background: #1B1714;
                                text-align: center;
                                line-height: 18px;
                                border-radius: 2px;
                                font-weight: 400;
                                font-size: 12px;
                                color: #CEA46C;
                            }

                            .numbers {
                                display: inline-block;
                                width: 37px;
                                // height: 16px;
                                background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);
                                border-radius: 2px;
                                font-weight: 500;
                                font-size: 12px;
                                color: #1B1714;
                                text-align: center;
                                line-height: 18px;
                            }
                        }

                    }

                    .money_right {
                        border-radius: 2px;
                        border: 1px solid #FF5A1A;
                        font-weight: 400;
                        font-size: 12px;
                        color: #FF5A1A;
                        // height: 16px;
                        text-align: center;
                        line-height: 16px;
                        // flex: 1;
                        // width: 40px;
                        min-width: 40px;
                        max-width: 70px;
                        // width: 60px;
                        box-sizing: border-box;

                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;

                    }
                }
            }
        }

        .list_down {
            margin-top: 10px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .list_down_item {
                width: 100%;
                font-weight: 400;
                font-size: 14px;


                .list_down_label {
                    color: #1a1b1c;
                }

                .list_down_value {
                    font-weight: 400;
                    font-size: 14px;
                    color: #b8beca;
                    word-break: break-all;
                }

                .list_down_value_lan {
                    color: #0094FF;
                }
            }

            .list_down_items {
                text-align: right;
            }
        }

        .buttons_div {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;

            .buttons_div_coreName {
                padding: 0 5px;
                height: 22px;
                background: #EBF4FF;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                box-sizing: border-box;

                .van-image {
                    width: 12px;
                    height: 12px;
                }

                .coreName {
                    line-height: 22px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #0094FF;
                    margin-left: 5px;
                }
            }

            .buttons_items {
                width: 84px;
                height: 24px;
                background: #0094FF;
                border-radius: 2px;
                text-align: center;
                line-height: 24px;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
            }

        }
    }

    .dialog_title {
        text-align: center;
        margin: 20px;
    }

    .content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px;
        margin-bottom: 15px;
        text-align: center;
    }

    .dialog_top {
        width: 100%;
        height: 165px;
        background: url('@/assets/operation/icon_erciquerenbeijing.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;

        .van-image {
            width: 70px;
            height: 70px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-top: 20px;
        }

    }

    .dialog_buttons {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 0 10px;

        .cancel {
            width: 135px;
            height: 44px;
            border-radius: 23px;
            border: 1px solid #1A1B1C;
            text-align: center;
            line-height: 44px;
        }

        .save {
            width: 135px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }
    }
}

.button {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 50px;
    z-index: 100;
    display: flex;
    line-height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .cancel {
        background: #FFFFFF;
        border: 1px solid #0094FF;
        color: #0094FF;
        border-radius: 23px;
    }

    .outbound {
        color: #fff;
        background: #0094FF;
        border-radius: 23px;
    }

    div {
        width: 150px;
        height: 40px;
        text-align: center;
    }
}
</style>